Skip to content
You have unread notifications

Link underlines

By default, links in text blocks on GitHub will now be underlined. You can set your preference in the accessibility settings.
goggle  /   Coursera_HTML-CSS...  /  

Commit

Permalink
Browse files Browse the repository at this point in the history
Solved assignment 5.
goggle committed Dec 22, 2016
1 parent 403d140 commit a05280c
Showing 298 changed files with 10,390 additions and 0 deletions.
6,760 changes: 6,760 additions & 0 deletions module5_solution/css/bootstrap.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions module5_solution/css/bootstrap.min.css

Large diffs are not rendered by default.

375 changes: 375 additions & 0 deletions module5_solution/css/styles.css
@@ -0,0 +1,375 @@
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}

/** HEADER **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}

#logo-img {
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}

.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Lora', serif;
color: #557c3e;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
.navbar-brand p { /* Kosher cert */
color: #000;
text-transform: uppercase;
font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span { /* Star-K */
vertical-align: middle;
}

#nav-list {
margin-top: 10px;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}

#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e;
text-align: right;
padding-right: 15px;
}

.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
border: 1px solid #61122f;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
/* END HEADER */

/* FOOTER */
.panel-footer {
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
}
.panel-footer div.row {
margin-bottom: 35px;
}
#hours, #address {
line-height: 2;
}
#hours > span, #address > span {
font-size: 1.3em;
}
#address p {
color: #557c3e;
font-size: .8em;
line-height: 1.8;
}
#testimonials {
font-style: italic;
}
#testimonials p:nth-child(2) {
margin-top: 25px;
}
/* END FOOTER */



/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px #3F0C1F;
border: 2px solid #3F0C1F;
}

#menu-tile, #specials-tile, #map-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
}
#menu-tile:hover, #specials-tile:hover, #map-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#menu-tile {
background: url('../images/menu-tile.jpg') no-repeat;
background-position: center;
}
#specials-tile {
background: url('../images/specials-tile.jpg') no-repeat;
background-position: center;
}
#menu-tile span, #specials-tile span, #map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */

/* MENU CATEGORIES PAGE */
.category-tile {
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
.category-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}

#menu-categories-title + div {
margin-bottom: 50px;
}
/* END MENU CATEGORIES PAGE */

/* SINGLE CATEGORY PAGE */
.menu-item-tile {
margin-bottom: 25px;
}
.menu-item-tile hr {
width: 80%;
}
.menu-item-tile .menu-item-price {
font-size: 1.1em;
text-align: right;
margin-top: -15px;
margin-right: -15px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
.menu-item-photo {
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
padding: 0;
margin-right: -15px;
margin-left: auto;
margin-bottom: 20px;
max-width: 250px;
}
.menu-item-photo div {
position: absolute;
bottom: 0;
right: 0;
width: 80px;
background-color: #557c3e;
text-align: center;
}
.menu-item-description {
padding-right: 30px;
}
h3.menu-item-title {
margin: 0 0 10px;
}
.menu-item-details {
font-size: .9em;
font-style: italic;
}
/* END SINGLE CATEGORY PAGE */


/********** Large devices only **********/
@media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/jumbotron_1200.jpg') no-repeat;
height: 675px;
}
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/restaurant-logo_medium.png') no-repeat;
width: 100px;
height: 100px;
margin: 5px 5px 5px 0;
}
/* End Header */

/* Home Page */
.container .jumbotron {
background: url('../images/jumbotron_992.jpg') no-repeat;
height: 558px;
}
/* End Home Page */
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
.container .jumbotron {
background: url('../images/jumbotron_768.jpg') no-repeat;
height: 432px;
}
/* End Home Page */
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
/* Header */
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1 { /* Restaurant name */
padding-top: 10px;
font-size: 5vw; /* 1vw = 1% of viewport width */
}
.navbar-brand p { /* Kosher cert */
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img { /* Star-K */
height: 20px;
}

#collapsable-nav a { /* Collapsed nav menu text */
font-size: 1.2em;
}
#collapsable-nav a span { /* Collapsed nav menu glyph */
font-size: 1em;
margin-right: 5px;
}

#call-btn > a {
font-size: 1.5em;
display: block;
margin: 0 20px;
padding: 10px;
border: 2px solid #fff;
background-color: #f6b319;
color: #951c49;
}
#xs-deliver {
margin-top: 5px;
font-size: .7em;
letter-spacing: .1em;
text-transform: uppercase;
}
/* End Header */

/* Footer */
.panel-footer section {
margin-bottom: 30px;
text-align: center;
}
.panel-footer section:nth-child(3) {
margin-bottom: 0; /* margin already exists on the whole row */
}
.panel-footer section hr {
width: 50%;
}
/* End Footer */

/* Home Page */
.container .jumbotron {
margin-top: 30px;
padding: 0;
}
#menu-tile, #specials-tile {
width: 360px;
margin: 0 auto 15px;
}

.menu-item-photo {
margin-right: auto;
}
.menu-item-tile .menu-item-price {
text-align: center;
}
.menu-item-description {
text-align: center;;
}
}


/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
/* Header */
.navbar-brand h1 { /* Restaurant name */
padding-top: 5px;
font-size: 6vw;
}
/* End Header */

/* Home page */
#menu-tile, #specials-tile {
width: 280px;
margin: 0 auto 15px;
}

.col-xxs-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
width: 100%;
}
}



Binary file not shown.
288 changes: 288 additions & 0 deletions module5_solution/fonts/glyphicons-halflings-regular.svg

Unable to render rich display

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added module5_solution/images/ajax-loader.gif

Unable to render rich display

Binary file added module5_solution/images/jumbotron_1200.jpg

Unable to render rich display

Binary file added module5_solution/images/jumbotron_768.jpg

Unable to render rich display

Binary file added module5_solution/images/jumbotron_992.jpg

Unable to render rich display

Binary file added module5_solution/images/menu-tile.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A1.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A10.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A11.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A2.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A3.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A4.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A5.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A6.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A7.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A8.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/A/A9.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B1.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B10.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B11.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B12.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B13.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B14.jpg

Unable to render rich display

Binary file added module5_solution/images/menu/B/B15.jpg
Binary file added module5_solution/images/menu/B/B16.jpg
Binary file added module5_solution/images/menu/B/B2.jpg
Binary file added module5_solution/images/menu/B/B3.jpg
Binary file added module5_solution/images/menu/B/B4.jpg
Binary file added module5_solution/images/menu/B/B5.jpg
Binary file added module5_solution/images/menu/B/B6.jpg
Binary file added module5_solution/images/menu/B/B7.jpg
Binary file added module5_solution/images/menu/B/B8.jpg
Binary file added module5_solution/images/menu/B/B9.jpg
Binary file added module5_solution/images/menu/C/C.jpg
Binary file added module5_solution/images/menu/C/C1.jpg
Binary file added module5_solution/images/menu/C/C10.jpg
Binary file added module5_solution/images/menu/C/C11.jpg
Binary file added module5_solution/images/menu/C/C12.jpg
Binary file added module5_solution/images/menu/C/C13.jpg
Binary file added module5_solution/images/menu/C/C14.jpg
Binary file added module5_solution/images/menu/C/C15.jpg
Binary file added module5_solution/images/menu/C/C16.jpg
Binary file added module5_solution/images/menu/C/C17.jpg
Binary file added module5_solution/images/menu/C/C18.jpg
Binary file added module5_solution/images/menu/C/C19.jpg
Binary file added module5_solution/images/menu/C/C2.jpg
Binary file added module5_solution/images/menu/C/C3.jpg
Binary file added module5_solution/images/menu/C/C4.jpg
Binary file added module5_solution/images/menu/C/C5.jpg
Binary file added module5_solution/images/menu/C/C6.jpg
Binary file added module5_solution/images/menu/C/C7.jpg
Binary file added module5_solution/images/menu/C/C8.jpg
Binary file added module5_solution/images/menu/C/C9.jpg
Binary file added module5_solution/images/menu/CM/CM.jpg
Binary file added module5_solution/images/menu/CM/CM1.jpg
Binary file added module5_solution/images/menu/CM/CM2.jpg
Binary file added module5_solution/images/menu/CM/CM3.jpg
Binary file added module5_solution/images/menu/CM/CM4.jpg
Binary file added module5_solution/images/menu/CM/CM5.jpg
Binary file added module5_solution/images/menu/CSR/CSR.jpg
Binary file added module5_solution/images/menu/CSR/CSR1.jpg
Binary file added module5_solution/images/menu/CSR/CSR2.jpg
Binary file added module5_solution/images/menu/CSR/CSR3.jpg
Binary file added module5_solution/images/menu/CSR/CSR4.jpg
Binary file added module5_solution/images/menu/CU/CU.jpg
Binary file added module5_solution/images/menu/CU/CU21.jpg
Binary file added module5_solution/images/menu/CU/CU22.jpg
Binary file added module5_solution/images/menu/CU/CU23.jpg
Binary file added module5_solution/images/menu/D/D.jpg
Binary file added module5_solution/images/menu/D/D1.jpg
Binary file added module5_solution/images/menu/D/D10.jpg
Binary file added module5_solution/images/menu/D/D11.jpg
Binary file added module5_solution/images/menu/D/D12.jpg
Binary file added module5_solution/images/menu/D/D13.jpg
Binary file added module5_solution/images/menu/D/D14.jpg
Binary file added module5_solution/images/menu/D/D15.jpg
Binary file added module5_solution/images/menu/D/D16.jpg
Binary file added module5_solution/images/menu/D/D17.jpg
Binary file added module5_solution/images/menu/D/D18.jpg
Binary file added module5_solution/images/menu/D/D2.jpg
Binary file added module5_solution/images/menu/D/D3.jpg
Binary file added module5_solution/images/menu/D/D4.jpg
Binary file added module5_solution/images/menu/D/D5.jpg
Binary file added module5_solution/images/menu/D/D6.jpg
Binary file added module5_solution/images/menu/D/D7.jpg
Binary file added module5_solution/images/menu/D/D8.jpg
Binary file added module5_solution/images/menu/D/D9.jpg
Binary file added module5_solution/images/menu/DK/DK.jpg
Binary file added module5_solution/images/menu/DK/DK1.jpg
Binary file added module5_solution/images/menu/DK/DK2.jpg
Binary file added module5_solution/images/menu/DK/DK3.jpg
Binary file added module5_solution/images/menu/DS/DS.jpg
Binary file added module5_solution/images/menu/DS/DS1.jpg
Binary file added module5_solution/images/menu/DS/DS2.jpg
Binary file added module5_solution/images/menu/F/F.jpg
Binary file added module5_solution/images/menu/F/F1.jpg
Binary file added module5_solution/images/menu/F/F10.jpg
Binary file added module5_solution/images/menu/F/F11.jpg
Binary file added module5_solution/images/menu/F/F12.jpg
Binary file added module5_solution/images/menu/F/F2.jpg
Binary file added module5_solution/images/menu/F/F3.jpg
Binary file added module5_solution/images/menu/F/F4.jpg
Binary file added module5_solution/images/menu/F/F5.jpg
Binary file added module5_solution/images/menu/F/F6.jpg
Binary file added module5_solution/images/menu/F/F7.jpg
Binary file added module5_solution/images/menu/F/F8.jpg
Binary file added module5_solution/images/menu/F/F9.jpg
Binary file added module5_solution/images/menu/FR/FR.jpg
Binary file added module5_solution/images/menu/FR/FR1.jpg
Binary file added module5_solution/images/menu/FR/FR2.jpg
Binary file added module5_solution/images/menu/FR/FR3.jpg
Binary file added module5_solution/images/menu/FR/FR4.jpg
Binary file added module5_solution/images/menu/FR/FR5.jpg
Binary file added module5_solution/images/menu/FY/FY.jpg
Binary file added module5_solution/images/menu/FY/FY1.jpg
Binary file added module5_solution/images/menu/FY/FY2.jpg
Binary file added module5_solution/images/menu/FY/FY3.jpg
Binary file added module5_solution/images/menu/FY/FY4.jpg
Binary file added module5_solution/images/menu/FY/FY5.jpg
Binary file added module5_solution/images/menu/L/L.jpg
Binary file added module5_solution/images/menu/L/L1.jpg
Binary file added module5_solution/images/menu/L/L10.jpg
Binary file added module5_solution/images/menu/L/L11.jpg
Binary file added module5_solution/images/menu/L/L12.jpg
Binary file added module5_solution/images/menu/L/L13.jpg
Binary file added module5_solution/images/menu/L/L14.jpg
Binary file added module5_solution/images/menu/L/L15.jpg
Binary file added module5_solution/images/menu/L/L16.jpg
Binary file added module5_solution/images/menu/L/L17.jpg
Binary file added module5_solution/images/menu/L/L18.jpg
Binary file added module5_solution/images/menu/L/L19.jpg
Binary file added module5_solution/images/menu/L/L2.jpg
Binary file added module5_solution/images/menu/L/L20.jpg
Binary file added module5_solution/images/menu/L/L21.jpg
Binary file added module5_solution/images/menu/L/L22.jpg
Binary file added module5_solution/images/menu/L/L23.jpg
Binary file added module5_solution/images/menu/L/L24.jpg
Binary file added module5_solution/images/menu/L/L26.jpg
Binary file added module5_solution/images/menu/L/L27.jpg
Binary file added module5_solution/images/menu/L/L28.jpg
Binary file added module5_solution/images/menu/L/L3.jpg
Binary file added module5_solution/images/menu/L/L4.jpg
Binary file added module5_solution/images/menu/L/L5.jpg
Binary file added module5_solution/images/menu/L/L6.jpg
Binary file added module5_solution/images/menu/L/L7.jpg
Binary file added module5_solution/images/menu/L/L8.jpg
Binary file added module5_solution/images/menu/L/L9.jpg
Binary file added module5_solution/images/menu/NF/NF.jpg
Binary file added module5_solution/images/menu/NF/NF10.jpg
Binary file added module5_solution/images/menu/NF/NF11.jpg
Binary file added module5_solution/images/menu/NF/NF12.jpg
Binary file added module5_solution/images/menu/NF/NF13.jpg
Binary file added module5_solution/images/menu/NL/NL.jpg
Binary file added module5_solution/images/menu/NL/NL1.jpg
Binary file added module5_solution/images/menu/NL/NL2.jpg
Binary file added module5_solution/images/menu/NL/NL3.jpg
Binary file added module5_solution/images/menu/NS/NS.jpg
Binary file added module5_solution/images/menu/NS/NS1.jpg
Binary file added module5_solution/images/menu/NS/NS2.jpg
Binary file added module5_solution/images/menu/NS/NS3.jpg
Binary file added module5_solution/images/menu/NS/NS4.jpg
Binary file added module5_solution/images/menu/PF/PF.jpg
Binary file added module5_solution/images/menu/PF/PF1.jpg
Binary file added module5_solution/images/menu/PF/PF2.jpg
Binary file added module5_solution/images/menu/PF/PF3.jpg
Binary file added module5_solution/images/menu/PF/PF4.jpg
Binary file added module5_solution/images/menu/PF/PF5.jpg
Binary file added module5_solution/images/menu/SO/SO.jpg
Binary file added module5_solution/images/menu/SO/SO1.jpg
Binary file added module5_solution/images/menu/SO/SO2.jpg
Binary file added module5_solution/images/menu/SO/SO3.jpg
Binary file added module5_solution/images/menu/SO/SO4.jpg
Binary file added module5_solution/images/menu/SO/SO5.jpg
Binary file added module5_solution/images/menu/SO/SO6.jpg
Binary file added module5_solution/images/menu/SO/SO7.jpg
Binary file added module5_solution/images/menu/SP/SP.jpg
Binary file added module5_solution/images/menu/SP/SP1.jpg
Binary file added module5_solution/images/menu/SP/SP2.jpg
Binary file added module5_solution/images/menu/SP/SP3.jpg
Binary file added module5_solution/images/menu/SP/SP4.jpg
Binary file added module5_solution/images/menu/SP/SP5.jpg
Binary file added module5_solution/images/menu/SP/SP6.jpg
Binary file added module5_solution/images/menu/SP/SP7.jpg
Binary file added module5_solution/images/menu/SP/SP8.jpg
Binary file added module5_solution/images/menu/SR/SR.jpg
Binary file added module5_solution/images/menu/SR/SR1.jpg
Binary file added module5_solution/images/menu/SR/SR10.jpg
Binary file added module5_solution/images/menu/SR/SR11.jpg
Binary file added module5_solution/images/menu/SR/SR12.jpg
Binary file added module5_solution/images/menu/SR/SR13.jpg
Binary file added module5_solution/images/menu/SR/SR14.jpg
Binary file added module5_solution/images/menu/SR/SR15.jpg
Binary file added module5_solution/images/menu/SR/SR16.jpg
Binary file added module5_solution/images/menu/SR/SR17.jpg
Binary file added module5_solution/images/menu/SR/SR18.jpg
Binary file added module5_solution/images/menu/SR/SR19.jpg
Binary file added module5_solution/images/menu/SR/SR2.jpg
Binary file added module5_solution/images/menu/SR/SR20.jpg
Binary file added module5_solution/images/menu/SR/SR21.jpg
Binary file added module5_solution/images/menu/SR/SR22.jpg
Binary file added module5_solution/images/menu/SR/SR23.jpg
Binary file added module5_solution/images/menu/SR/SR24.jpg
Binary file added module5_solution/images/menu/SR/SR25.jpg
Binary file added module5_solution/images/menu/SR/SR26.jpg
Binary file added module5_solution/images/menu/SR/SR27.jpg
Binary file added module5_solution/images/menu/SR/SR28.jpg
Binary file added module5_solution/images/menu/SR/SR29.jpg
Binary file added module5_solution/images/menu/SR/SR3.jpg
Binary file added module5_solution/images/menu/SR/SR30.jpg
Binary file added module5_solution/images/menu/SR/SR31.jpg
Binary file added module5_solution/images/menu/SR/SR32.jpg
Binary file added module5_solution/images/menu/SR/SR33.jpg
Binary file added module5_solution/images/menu/SR/SR34.jpg
Binary file added module5_solution/images/menu/SR/SR35.jpg
Binary file added module5_solution/images/menu/SR/SR36.jpg
Binary file added module5_solution/images/menu/SR/SR37.jpg
Binary file added module5_solution/images/menu/SR/SR38.jpg
Binary file added module5_solution/images/menu/SR/SR39.jpg
Binary file added module5_solution/images/menu/SR/SR4.jpg
Binary file added module5_solution/images/menu/SR/SR40.jpg
Binary file added module5_solution/images/menu/SR/SR41.jpg
Binary file added module5_solution/images/menu/SR/SR42.jpg
Binary file added module5_solution/images/menu/SR/SR43.jpg
Binary file added module5_solution/images/menu/SR/SR5.jpg
Binary file added module5_solution/images/menu/SR/SR6.jpg
Binary file added module5_solution/images/menu/SR/SR7.jpg
Binary file added module5_solution/images/menu/SR/SR8.jpg
Binary file added module5_solution/images/menu/SR/SR9.jpg
Binary file added module5_solution/images/menu/SS/SS.jpg
Binary file added module5_solution/images/menu/SS/SS1.jpg
Binary file added module5_solution/images/menu/SS/SS10.jpg
Binary file added module5_solution/images/menu/SS/SS11.jpg
Binary file added module5_solution/images/menu/SS/SS12.jpg
Binary file added module5_solution/images/menu/SS/SS13.jpg
Binary file added module5_solution/images/menu/SS/SS14.jpg
Binary file added module5_solution/images/menu/SS/SS2.jpg
Binary file added module5_solution/images/menu/SS/SS3.jpg
Binary file added module5_solution/images/menu/SS/SS4.jpg
Binary file added module5_solution/images/menu/SS/SS5.jpg
Binary file added module5_solution/images/menu/SS/SS6.jpg
Binary file added module5_solution/images/menu/SS/SS7.jpg
Binary file added module5_solution/images/menu/SS/SS8.jpg
Binary file added module5_solution/images/menu/SS/SS9.jpg
Binary file added module5_solution/images/menu/T/T.jpg
Binary file added module5_solution/images/menu/T/T1.jpg
Binary file added module5_solution/images/menu/T/T2.jpg
Binary file added module5_solution/images/menu/T/T3.jpg
Binary file added module5_solution/images/menu/T/T4.jpg
Binary file added module5_solution/images/menu/V/V.jpg
Binary file added module5_solution/images/menu/V/V1.jpg
Binary file added module5_solution/images/menu/V/V2.jpg
Binary file added module5_solution/images/menu/V/V3.jpg
Binary file added module5_solution/images/menu/V/V4.jpg
Binary file added module5_solution/images/menu/V/V5.jpg
Binary file added module5_solution/images/menu/V/V6.jpg
Binary file added module5_solution/images/menu/V/V7.jpg
Binary file added module5_solution/images/menu/VG/VG.jpg
Binary file added module5_solution/images/menu/VG/VG1.jpg
Binary file added module5_solution/images/menu/VG/VG10.jpg
Binary file added module5_solution/images/menu/VG/VG11.jpg
Binary file added module5_solution/images/menu/VG/VG12.jpg
Binary file added module5_solution/images/menu/VG/VG13.jpg
Binary file added module5_solution/images/menu/VG/VG14.jpg
Binary file added module5_solution/images/menu/VG/VG2.jpg
Binary file added module5_solution/images/menu/VG/VG3.jpg
Binary file added module5_solution/images/menu/VG/VG4.jpg
Binary file added module5_solution/images/menu/VG/VG5.jpg
Binary file added module5_solution/images/menu/VG/VG6.jpg
Binary file added module5_solution/images/menu/VG/VG7.jpg
Binary file added module5_solution/images/menu/VG/VG8.jpg
Binary file added module5_solution/images/menu/VG/VG9.jpg
Binary file added module5_solution/images/restaurant-logo.png
Binary file added module5_solution/images/restaurant-logo_large.png
Binary file added module5_solution/images/restaurant-logo_small.png
Binary file added module5_solution/images/specials-tile.jpg
Binary file added module5_solution/images/star-k-logo.png
108 changes: 108 additions & 0 deletions module5_solution/index.html
@@ -0,0 +1,108 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>

<div class="navbar-brand">
<a href="index.html"><h1>David Chu's China Bistro</h1></a>
<p>
<img src="images/star-k-logo.png" alt="Kosher certification">
<span>Kosher Certified</span>
</p>
</div>

<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navHomeButton" class="visible-xs active">
<a href="index.html">
<span class="glyphicon glyphicon-home"></span> Home</a>
</li>
<li id="navMenuButton">
<a href="#" onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul><!-- #nav-list -->
</div><!-- .collapse .navbar-collapse -->
</div><!-- .container -->
</nav><!-- #header-nav -->
</header>

<div id="call-btn" class="visible-xs">
<a class="btn" href="tel:410-602-5008">
<span class="glyphicon glyphicon-earphone"></span>
410-602-5008
</a>
</div>
<div id="xs-deliver" class="text-center visible-xs">* We Deliver</div>

<div id="main-content" class="container"></div>

<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span>Hours:</span><br>
Sun-Thurs: 11:15am - 10:00pm<br>
Fri: 11:15am - 2:30pm<br>
Saturday Closed
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span>Address:</span><br>
7105 Reisterstown Road<br>
Baltimore, MD 21215
<p>* Delivery area within 3-4 miles, with minimum order of $20 plus $3 charge for all deliveries.</p>
<hr class="visible-xs">
</section>
<section id="testimonials" class="col-sm-4">
<p>"The best Chinese restaurant I've been to! And that's saying a lot, since I've been to many!"</p>
<p>"Amazing food! Great service! Couldn't ask for more! I'll be back again and again!"</p>
</section>
</div>
<div class="text-center">&copy; Copyright David Chu's China Bistro 2016</div>
</div>
</footer>

<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
</body>
</html>
67 changes: 67 additions & 0 deletions module5_solution/js/ajax-utils.js
@@ -0,0 +1,67 @@
(function (global) {

// Set up a namespace for our utility
var ajaxUtils = {};


// Returns an HTTP request object
function getRequestObject() {
if (window.XMLHttpRequest) {
return (new XMLHttpRequest());
}
else if (window.ActiveXObject) {
// For very old IE browsers (optional)
return (new ActiveXObject("Microsoft.XMLHTTP"));
}
else {
global.alert("Ajax is not supported!");
return(null);
}
}


// Makes an Ajax GET request to 'requestUrl'
ajaxUtils.sendGetRequest =
function(requestUrl, responseHandler, isJsonResponse) {
var request = getRequestObject();
request.onreadystatechange =
function() {
handleResponse(request,
responseHandler,
isJsonResponse);
};
request.open("GET", requestUrl, true);
request.send(null); // for POST only
};


// Only calls user provided 'responseHandler'
// function if response is ready
// and not an error
function handleResponse(request,
responseHandler,
isJsonResponse) {
if ((request.readyState == 4) &&
(request.status == 200)) {

// Default to isJsonResponse = true
if (isJsonResponse == undefined) {
isJsonResponse = true;
}

if (isJsonResponse) {
responseHandler(JSON.parse(request.responseText));
}
else {
responseHandler(request.responseText);
}
}
}


// Expose utility to the global object
global.$ajaxUtils = ajaxUtils;


})(window);

2,363 changes: 2,363 additions & 0 deletions module5_solution/js/bootstrap.js

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions module5_solution/js/bootstrap.min.js

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions module5_solution/js/jquery-2.1.4.min.js

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions module5_solution/js/npm.js
@@ -0,0 +1,13 @@
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
347 changes: 347 additions & 0 deletions module5_solution/js/script.js
@@ -0,0 +1,347 @@
$(function () { // Same as document.addEventListener("DOMContentLoaded"...

// Same as document.querySelector("#navbarToggle").addEventListener("blur",...
$("#navbarToggle").blur(function (event) {
var screenWidth = window.innerWidth;
if (screenWidth < 768) {
$("#collapsable-nav").collapse('hide');
}
});
});

(function (global) {

var dc = {};

var homeHtmlUrl = "snippets/home-snippet.html";
var allCategoriesUrl =
"https://davids-restaurant.herokuapp.com/categories.json";
var categoriesTitleHtml = "snippets/categories-title-snippet.html";
var categoryHtml = "snippets/category-snippet.html";
var menuItemsUrl =
"https://davids-restaurant.herokuapp.com/menu_items.json?category=";
var menuItemsTitleHtml = "snippets/menu-items-title.html";
var menuItemHtml = "snippets/menu-item.html";

// Convenience function for inserting innerHTML for 'select'
var insertHtml = function (selector, html) {
var targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};

// Show loading icon inside element identified by 'selector'.
var showLoading = function (selector) {
var html = "<div class='text-center'>";
html += "<img src='images/ajax-loader.gif'></div>";
insertHtml(selector, html);
};

// Return substitute of '{{propName}}'
// with propValue in given 'string'
var insertProperty = function (string, propName, propValue) {
var propToReplace = "{{" + propName + "}}";
string = string
.replace(new RegExp(propToReplace, "g"), propValue);
return string;
};

// Remove the class 'active' from home and switch to Menu button
var switchMenuToActive = function () {
// Remove 'active' from home button
var classes = document.querySelector("#navHomeButton").className;
classes = classes.replace(new RegExp("active", "g"), "");
document.querySelector("#navHomeButton").className = classes;

// Add 'active' to menu button if not already there
classes = document.querySelector("#navMenuButton").className;
if (classes.indexOf("active") === -1) {
classes += " active";
document.querySelector("#navMenuButton").className = classes;
}
};

// On page load (before images or CSS)
document.addEventListener("DOMContentLoaded", function (event) {

// TODO: STEP 0: Look over the code from
// *** start ***
// to
// *** finish ***
// below.
// We changed this code to retrieve all categories from the server instead of
// simply requesting home HTML snippet. We now also have another function
// called buildAndShowHomeHTML that will receive all the categories from the server
// and process them: choose random category, retrieve home HTML snippet, insert that
// random category into the home HTML snippet, and then insert that snippet into our
// main page (index.html).
//
// TODO: STEP 1: Substitute [...] below with the *value* of the function buildAndShowHomeHTML,
// so it can be called when server responds with the categories data.

// *** start ***
// On first load, show home view
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
allCategoriesUrl,
buildAndShowHomeHTML, // ***** <---- TODO: STEP 1: Substitute [...] ******
true); // Explicitely setting the flag to get JSON from server processed into an object literal
});
// *** finish **


// Builds HTML for the home page based on categories array
// returned from the server.
function buildAndShowHomeHTML (categories) {

// Load home snippet page
$ajaxUtils.sendGetRequest(
homeHtmlUrl,
function (homeHtml) {

// TODO: STEP 2: Here, call chooseRandomCategory, passing it retrieved 'categories'
// Pay attention to what type of data that function returns vs what the chosenCategoryShortName
// variable's name implies it expects.
// var chosenCategoryShortName = ....
var chosenCategoryShortName = chooseRandomCategory(categories).short_name;


// TODO: STEP 3: Substitute {{randomCategoryShortName}} in the home html snippet with the
// chosen category from STEP 2. Use existing insertProperty function for that purpose.
// Look through this code for an example of how to do use the insertProperty function.
// WARNING! You are inserting something that will have to result in a valid Javascript
// syntax because the substitution of {{randomCategoryShortName}} becomes an argument
// being passed into the $dc.loadMenuItems function. Think about what that argument needs
// to look like. For example, a valid call would look something like this:
// $dc.loadMenuItems('L')
// Hint: you need to surround the chosen category short name with something before inserting
// it into the home html snippet.
//
// var homeHtmlToInsertIntoMainPage = ....
chosenCategoryShortName = "'" + chosenCategoryShortName + "'";
var homeHtmlToInsertIntoMainPage = insertProperty(homeHtml, "randomCategoryShortName", chosenCategoryShortName);


// TODO: STEP 4: Insert the the produced HTML in STEP 3 into the main page
// Use the existing insertHtml function for that purpose. Look through this code for an example
// of how to do that.
// ....
insertHtml('#main-content', homeHtmlToInsertIntoMainPage);

},
false); // False here because we are getting just regular HTML from the server, so no need to process JSON.
}


// Given array of category objects, returns a random category object.
function chooseRandomCategory (categories) {
// Choose a random index into the array (from 0 inclusively until array length (exclusively))
var randomArrayIndex = Math.floor(Math.random() * categories.length);

// return category object with that randomArrayIndex
return categories[randomArrayIndex];
}


// Load the menu categories view
dc.loadMenuCategories = function () {
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
allCategoriesUrl,
buildAndShowCategoriesHTML);
};


// Load the menu items view
// 'categoryShort' is a short_name for a category
dc.loadMenuItems = function (categoryShort) {
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
menuItemsUrl + categoryShort,
buildAndShowMenuItemsHTML);
};


// Builds HTML for the categories page based on the data
// from the server
function buildAndShowCategoriesHTML (categories) {
// Load title snippet of categories page
$ajaxUtils.sendGetRequest(
categoriesTitleHtml,
function (categoriesTitleHtml) {
// Retrieve single category snippet
$ajaxUtils.sendGetRequest(
categoryHtml,
function (categoryHtml) {
// Switch CSS class active to menu button
switchMenuToActive();

var categoriesViewHtml =
buildCategoriesViewHtml(categories,
categoriesTitleHtml,
categoryHtml);
insertHtml("#main-content", categoriesViewHtml);
},
false);
},
false);
}


// Using categories data and snippets html
// build categories view HTML to be inserted into page
function buildCategoriesViewHtml(categories,
categoriesTitleHtml,
categoryHtml) {

var finalHtml = categoriesTitleHtml;
finalHtml += "<section class='row'>";

// Loop over categories
for (var i = 0; i < categories.length; i++) {
// Insert category values
var html = categoryHtml;
var name = "" + categories[i].name;
var short_name = categories[i].short_name;
html =
insertProperty(html, "name", name);
html =
insertProperty(html,
"short_name",
short_name);
finalHtml += html;
}

finalHtml += "</section>";
return finalHtml;
}



// Builds HTML for the single category page based on the data
// from the server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
// Load title snippet of menu items page
$ajaxUtils.sendGetRequest(
menuItemsTitleHtml,
function (menuItemsTitleHtml) {
// Retrieve single menu item snippet
$ajaxUtils.sendGetRequest(
menuItemHtml,
function (menuItemHtml) {
// Switch CSS class active to menu button
switchMenuToActive();

var menuItemsViewHtml =
buildMenuItemsViewHtml(categoryMenuItems,
menuItemsTitleHtml,
menuItemHtml);
insertHtml("#main-content", menuItemsViewHtml);
},
false);
},
false);
}


// Using category and menu items data and snippets html
// build menu items view HTML to be inserted into page
function buildMenuItemsViewHtml(categoryMenuItems,
menuItemsTitleHtml,
menuItemHtml) {

menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
"name",
categoryMenuItems.category.name);
menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
"special_instructions",
categoryMenuItems.category.special_instructions);

var finalHtml = menuItemsTitleHtml;
finalHtml += "<section class='row'>";

// Loop over menu items
var menuItems = categoryMenuItems.menu_items;
var catShortName = categoryMenuItems.category.short_name;
for (var i = 0; i < menuItems.length; i++) {
// Insert menu item values
var html = menuItemHtml;
html =
insertProperty(html, "short_name", menuItems[i].short_name);
html =
insertProperty(html,
"catShortName",
catShortName);
html =
insertItemPrice(html,
"price_small",
menuItems[i].price_small);
html =
insertItemPortionName(html,
"small_portion_name",
menuItems[i].small_portion_name);
html =
insertItemPrice(html,
"price_large",
menuItems[i].price_large);
html =
insertItemPortionName(html,
"large_portion_name",
menuItems[i].large_portion_name);
html =
insertProperty(html,
"name",
menuItems[i].name);
html =
insertProperty(html,
"description",
menuItems[i].description);

// Add clearfix after every second menu item
if (i % 2 !== 0) {
html +=
"<div class='clearfix visible-lg-block visible-md-block'></div>";
}

finalHtml += html;
}

finalHtml += "</section>";
return finalHtml;
}


// Appends price with '$' if price exists
function insertItemPrice(html,
pricePropName,
priceValue) {
// If not specified, replace with empty string
if (!priceValue) {
return insertProperty(html, pricePropName, "");
}

priceValue = "$" + priceValue.toFixed(2);
html = insertProperty(html, pricePropName, priceValue);
return html;
}


// Appends portion name in parens if it exists
function insertItemPortionName(html,
portionPropName,
portionValue) {
// If not specified, return original string
if (!portionValue) {
return insertProperty(html, portionPropName, "");
}

portionValue = "(" + portionValue + ")";
html = insertProperty(html, portionPropName, portionValue);
return html;
}


global.$dc = dc;

})(window);
4 changes: 4 additions & 0 deletions module5_solution/snippets/categories-title-snippet.html
@@ -0,0 +1,4 @@
<h2 id="menu-categories-title" class="text-center">Menu Categories</h2>
<div class="text-center">
Substituting white rice with brown rice or fried rice after 3:00pm will be $1.50 for a pint and $2.50 for a quart.
</div>
8 changes: 8 additions & 0 deletions module5_solution/snippets/category-snippet.html
@@ -0,0 +1,8 @@
<div class="col-md-3 col-sm-4 col-xs-6 col-xxs-12">
<a href="#" onclick="$dc.loadMenuItems('{{short_name}}');">
<div class="category-tile">
<img width="200" height="200" src="images/menu/{{short_name}}/{{short_name}}.jpg" alt="{{name}}">
<span>{{name}}</span>
</div>
</a>
</div>
22 changes: 22 additions & 0 deletions module5_solution/snippets/home-snippet.html
@@ -0,0 +1,22 @@
<div class="jumbotron">
<img src="images/jumbotron_768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>

<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="#" onclick="$dc.loadMenuCategories();"><div id="menu-tile"><span>menu</span></div></a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="#" onclick="$dc.loadMenuItems({{randomCategoryShortName}});">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.com/maps/place/David+Chu's+China+Bistro/@39.3635874,-76.7138622,17z/data=!4m6!1m3!3m2!1s0x89c81a14e7817803:0xab20a0e99daa17ea!2sDavid+Chu's+China+Bistro!3m1!1s0x89c81a14e7817803:0xab20a0e99daa17ea" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3084.675372390488!2d-76.71386218529199!3d39.3635874269356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c81a14e7817803%3A0xab20a0e99daa17ea!2sDavid+Chu&#39;s+China+Bistro!5e0!3m2!1sen!2sus!4v1452824864156" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
16 changes: 16 additions & 0 deletions module5_solution/snippets/menu-item.html
@@ -0,0 +1,16 @@
<div class="menu-item-tile col-md-6">
<div class="row">
<div class="col-sm-5">
<div class="menu-item-photo">
<div>{{short_name}}</div>
<img class="img-responsive" width="250" height="150" src="images/menu/{{catShortName}}/{{short_name}}.jpg" alt="Item">
</div>
<div class="menu-item-price">{{price_small}}<span> {{small_portion_name}}</span> {{price_large}} <span>{{large_portion_name}}</span></div>
</div>
<div class="menu-item-description col-sm-7">
<h3 class="menu-item-title">{{name}}</h3>
<p class="menu-item-details">{{description}}</p>
</div>
</div>
<hr class="visible-xs">
</div>
2 changes: 2 additions & 0 deletions module5_solution/snippets/menu-items-title.html
@@ -0,0 +1,2 @@
<h2 id="menu-categories-title" class="text-center">{{name}} Menu</h2>
<div class="text-center">{{special_instructions}}</div>

0 comments on commit a05280c

@pravallikamankena
Add heading text Add bold text, <Ctrl+b> Add italic text, <Ctrl+i>
Add a quote, <Ctrl+Shift+.> Add code, <Ctrl+e> Add a link, <Ctrl+k>
Add a bulleted list, <Ctrl+Shift+8> Add a numbered list, <Ctrl+Shift+7> Add a task list, <Ctrl+Shift+l>
Directly mention a user or team Reference an issue, pull request, or discussion
Select a reply ctrl .
Add saved reply
Add heading text Add bold text, <Ctrl+b> Add italic text, <Ctrl+i> Add a bulleted list, <Ctrl+Shift+8> Add a numbered list, <Ctrl+Shift+7> Add a task list, <Ctrl+Shift+l>
5 results found.